<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="身份证号码、电话号码或者姓名:">
        <el-input placeholder="请输入查询信息" v-model="keyword"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search()" v-model="vipselbtn" v-if="vipselshow">查询</el-button>
        <el-button type="danger" @click="delAll()" v-model="vipdelbtn" v-if="vipdelshow">批量删除</el-button>
        <el-button type="success" @click="addVip()" v-model="vipaddbtn" v-if="vipaddshow">增加</el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTable"
      :data="pageInfo.list"
      tooltip-effect="dark"
      style="width: 680px; margin: 0px auto"
      @selection-change="handleSelectionChange"
      >
      <!-- 多选框列 
     prop:指定该列要显示的数据属性
     -->
      <el-table-column type="selection" width="55" prop="staff_id" align="center">
      </el-table-column>
      <el-table-column prop="vip_name" label="vip姓名" width="120" align="center">
      </el-table-column>
      <el-table-column prop="vip_telephone" label="vip电话" width="120" align="center">
      </el-table-column>
      <el-table-column prop="vip_idcard" label="vip身份证" width="120" align="center">
      </el-table-column>
      <el-table-column label="操作" width="250" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="updVip(scope.row)" v-model="vipupdbtn" v-if="vipupdshow"
            >修改</el-button
          >
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)" v-model="vipdelbtn" v-if="vipdelshow"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 
size-change：每页显示的条目数发生变化的时候会调用的函数

current-change:当前页发生变化的时候会调用的函数
     -->
    <br /><br />
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[2, 5, 10]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>

    <!-- 增加模态框 -->
    <el-dialog title="Vip增加" :visible.sync="addDialogFormVisible">
      <el-form>
        <el-form-item label="身份证号" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.vip_idcard"></el-input>
        </el-form-item>
        <el-form-item label="Vip姓名" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.vip_name"></el-input>
        </el-form-item>
        <el-form-item label="Vip电话" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.vip_telephone"></el-input>
        </el-form-item>   
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveAdd()">确定</el-button>
      </div>
    </el-dialog>
    <!-- 增加模态框结束 -->



    <!-- 修改模态框 -->
    <el-dialog title="Vip修改" :visible.sync="updDialogFormVisible">
      <el-form>
        <el-form-item label="身份证号" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.vip_idcard"></el-input>
        </el-form-item>
        <el-form-item label="Vip姓名" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.vip_name"></el-input>
        </el-form-item>
        <el-form-item label="Vip电话" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.vip_telephone"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveUpd()">确定</el-button>
      </div>
    </el-dialog>
    <!-- 修改模态框结束 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      vipupdbtn:'49',
      vipselbtn:'50',
      vipaddbtn:'48',
      vipdelbtn:'51',
      vipupdshow:false,
      vipselshow:false,
      vipaddshow:false,
      vipdelshow:false,
      pageInfo: {},
      currentPage: 1,
      pageSize: 3,
      keyword: "",
      ids: [],
      addDialogFormVisible: false,
      addForm: {
        vip_idcard: "",
        vip_name: "",
        vip_telephone: "",
      },
      formLabelWidth: "150px",
      deptList: [],
      positionList: [],
      roleDialogFormVisible: false,
      roleList: [],
      checkedRoles: [],
      uid: "",
      updDialogFormVisible: false,
    };
  },
  methods: {
    loadData() {
      this.$axios
        .get("/vip", {
          params: {
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            keyword: this.keyword,
          },
        })
        .then((res) => {
          this.pageInfo = res.data.data;
                    setTimeout(() => {
            //设置默认选中项
            this.login();
          }, 0);
        })
        .catch((error) => {});
    },
    //val:array,代表的是选中所有行的数据
    handleSelectionChange(val) {
      var ids = []; //存放选中的id
      for (let item of val) {
        ids.push(item.vip_id);
      }
      //将选中的所有项的id放到数据模型中
      this.ids = ids;

      console.log(ids);
      //this.multipleSelection = val;
    },
    //val：每页的条目数
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.loadData();
      console.log(`每页 ${val} 条`);
    },
    //val:当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadData();
      console.log(`当前页: ${val}`);
    },
    search() {
      this.loadData();
    },
    delAll() {
      this.$axios
        .post("/vip/delAll", this.ids)
        .then((res) => {
          alert(res.data.message);
          this.loadData();
        })
        .catch((error) => {});
    },
    handleDelete(item) {
      var id = item.vip_id;
      this.$axios.delete("/vip/" + id).then((res) => {
        alert(res.data.message);
        this.loadData();
      });
      //项服务器发送请求删除就ok
    },
    addVip() {
      // this.addForm.staff_code = "";
      // this.addForm.staff_name = "";
      // this.addForm.staff_telephone = "";
      // this.addForm.staff_sex = "";
      // this.addForm.staff_birthday = "";
      // this.addForm.position_id = "";
      // this.addForm.dept_id = "";
      this.addDialogFormVisible = true;
      this.$axios
        .get("/position")
        .then((res) => {
          this.deptList = res.data.data;
          this.positionList = res.data.data;
        })
        .catch((error) => {});
    },
    saveAdd() {
      this.$axios
        .post("/vip/add", this.addForm)
        .then((res) => {
          alert(res.data.message);
          this.addForm.vip_idcard = "";
          this.addForm.vip_name = "";
          this.addForm.vip_telephone = "";
          this.addDialogFormVisible = false;
          this.loadData();
        })
        .catch((error) => {});
    },
    saveRoles() {
      this.$axios
        .post("/roles/save", {
          uid: this.uid,
          checkedRoles: this.checkedRoles,
        })
        .then((res) => {
          this.roleDialogFormVisible = false;
          alert(res.data.message);
        })
        .catch((error) => {});
    },
    updVip(item) {
      this.updDialogFormVisible = true;
      this.id = item.vip_id;
      this.$axios
        .get("/vip/" + this.id)
        .then((res) => {
          this.addForm.vip_idcard = res.data.data.vip.vip_idcard;
          this.addForm.vip_name = res.data.data.vip.vip_name;
          this.addForm.vip_telephone = res.data.data.vip.vip_telephone;
        })
        .catch((error) => {});
    },
    saveUpd() {
      this.$axios
        .put("/vip", {
          vip_id: this.id,
          vip_idcard: this.addForm.vip_idcard,
          vip_name: this.addForm.vip_name,
          vip_telephone: this.addForm.vip_telephone,
        
        })
        .then((res) => {
          alert(res.data.message);
          this.updDialogFormVisible = false;
          this.addForm.vip_idcard = "";
          this.addForm.vip_name = "";
          this.addForm.vip_telephone = "";
          this.loadData();
        });
    },
    login(){
      var l = sessionStorage.getItem("permission_list");
      var list = l.split(',');
      list.forEach((item)=>{
        if(item == this.vipupdbtn){
          this.vipupdshow = true;
        }
        if(item == this.vipaddbtn){
          this.vipaddshow = true;
        }
        if(item == this.vipselbtn){
          this.vipselshow = true;
        }
        if(item == this.vipdelbtn){
          this.vipdelshow = true;
        }
      })
    }
  },
  mounted() {
    this.loadData();
  },
};
</script>